<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>25-键盘UI</title>
</head>

<body>
    <div class="bgBox flex">
        <div class="keyboardBox">
            <div class="row row_A">
                <ul>
                    <li class="esc">
                        <img src="./images/location.png" alt="">
                    </li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>0</li>
                    <li>_</li>
                    <li>=</li>
                    <li class="back">
                        <img src="./images/message.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="row row_B">
                <ul>
                    <li class="tab">
                        <img src="./images/phone.png" alt="">
                    </li>
                    <li>Q</li>
                    <li>W</li>
                    <li>E</li>
                    <li>R</li>
                    <li>T</li>
                    <li>Y</li>
                    <li>U</li>
                    <li>I</li>
                    <li>O</li>
                    <li>P</li>
                    <li>[</li>
                    <li>]</li>
                    <li>\</li>
                </ul>
            </div>
            <div class="row row_C">
                <ul>
                    <li class="caps">
                        <img src="./images/plus.png" alt="">
                    </li>
                    <li>A</li>
                    <li>S</li>
                    <li>D</li>
                    <li>F</li>
                    <li>G</li>
                    <li>H</li>
                    <li>J</li>
                    <li>K</li>
                    <li>L</li>
                    <li>;</li>
                    <li>"</li>
                    <li class="enter">
                        <img src="./images/share.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="row row_D">
                <ul>
                    <li class="shiftLeft">
                        <img src="./images/location.png" alt="">
                    </li>
                    <li>Z</li>
                    <li>X</li>
                    <li>C</li>
                    <li>V</li>
                    <li>B</li>
                    <li>N</li>
                    <li>M</li>
                    <li>,</li>
                    <li>.</li>
                    <li>?</li>
                    <li class="shiftRight">
                        <img src="./images/message.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="row row_E">
                <ul>
                    <li>ctrl</li>
                    <li>alt</li>
                    <li>cmd</li>
                    <li class="kg"></li>
                    <li>cmd</li>
                    <li>alt</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>